<!-- 故障报修记录查询 -->
<template>
  <view class="trading-repair-query ">
    <uni-forms ref="formref" :modelValue="formdata" :rules="formrules" label-width="120" class="trading-repair-forms p20 mb10">
      <uni-forms-item label="非系统户">
        <switch class="f-r" style="transform:scale(0.7)" @change="switchClick" />
      </uni-forms-item>
      <view v-if="formdata.isNil == '1'">
        <uni-forms-item label="用户编号">
          <uni-easyinput disabled v-model="formdata.yhbh" placeholder="非系统用户" />
        </uni-forms-item>
        <uni-forms-item label="联系方式" name="yhdh" required>
          <uni-easyinput v-model="formdata.yhdh" placeholder="联系方式" />
        </uni-forms-item>
      </view>
      <view v-else>
        <uni-forms-item label="用户编号" name="yhbh" required>
          <uni-easyinput v-model="formdata.yhbh" placeholder="用户编号" />
        </uni-forms-item>
        <uni-forms-item label="联系方式">
          <uni-easyinput v-model="formdata.yhdh" placeholder="联系方式" />
        </uni-forms-item>
      </view>
    </uni-forms>
    <view class="p20">
      <button @click="formFubmit" block type="primary" native-type="submit">查询</button>
    </view>

    <uni-list v-if="listData.length" class="query-list" :avatar-circle="true">
      <uni-list-item v-for="(item,index)  in listData" title="故障报表" direction="column" clickable showArrow :key="index" @click="detailsClick(item)">
        <template v-slot:footer>
          <view class="query-describe">
            <text>报修时间：</text>
            <text>{{item.sqsj}}</text>
          </view>
          <view class="query-describe">
            <text>处理进度：</text>
            <text>{{zfdmFormatter(item.gzdzt)}}</text>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script setup lang="ts">
  import { getJgbm } from "@/utils/storage";
  import { getZfdmByDmzl } from "@/api/request/getZfdmByDmzl";
  import { GzdGzslSelectiveGet } from "@/api/request/GzdGzslSelectiveGet";
  import { ref, reactive, onBeforeMount } from 'vue';

  let listData = ref([]);
  let listSQZT = reactive([]);
  let formref = ref(null)
  let formdata = reactive({
    isNil: '0',
    yhbh: '',
    yhdh: '',
  })
  const formrules = {
    yhbh: { rules: [{ required: true, errorMessage: '请填写用户编号' }] },
    yhdh: { rules: [{ required: true, errorMessage: '请填写联系方式' }, { pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, errorMessage: '手机号码格式错误！' },] },
  }
  onBeforeMount(() => {
    getListSQZT()
  })
  const getListSQZT = () => {
    getZfdmByDmzl({
      data: {
        dmzl: "SQZT"
      },
      success: (res) => {
        let list = res || []
        listSQZT = list
      },
      fail: (code, message) => {
        console.log(code, message)
      }
    })
  }
  function formFubmit() {
    formref.value.validate().then(res => {
      // console.log('表单数据信息：', res);
      GzdGzslSelectiveGet({
        data: {
          jgbm: getJgbm(),
          bxslrid: "9999",
          ...formdata
        },
        success: (res) => {
          listData.value = res
        },
        fail: (code, message) => {
          console.log(code, message)
        }
      })

    }).catch(err => {
      // console.log('表单错误信息：', err);
      uni.showToast({ icon: "none", title: err[0].errorMessage })
    })
  }
  function detailsClick(item) {
    uni.navigateTo({ url: './details?detailsData=' + JSON.stringify(item) })
  }
  function zfdmFormatter(value) {
    let zfdmArr = listSQZT.filter(item => item.dmbh == value);
    if (zfdmArr.length) {
      return zfdmArr[0].dmnr.split("-")[1];
    }
    return '';
  }
  function switchClick(e) {
    if (e.detail.value) {
      formdata.yhbh = "非系统用户"
      formdata.isNil = '1'
    } else {
      formdata.yhbh = ''
      formdata.isNil = '0'
    }
  }
</script>

<style lang="scss" scoped>
  .trading-repair-query {
    .trading-repair-forms {
      background: #fff;
    }
  }

  .query-list {
    .query-title {
      line-height: 1.8;
      color: #3b4144;
      font-size: 28rpx;
    }

    .query-describe {
      line-height: 1.2;
      color: #999;
      font-size: 24rpx;

    }
  }
</style>